<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../引入vue2.js"></script>
    <style>
        .aa {}

        .bb {}

        .cc {}

        .dd {}
    </style>
</head>
<body>
    多个 class 和 style 的任意切换
    <div id="app">
        <div :class="classObj">动态切换 class-1-对象</div>
        <div :class="classArr">动态切换 class-2-数组</div>
        <div :style="styleObj">动态切换 style-1-对象</div>
        <div :style="styleArr">动态切换 style-2-数组</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            classObj: {
                aa: true,
                bb: true,
                cc: false
            },
            classArr: ['aa', 'bb'],
            styleObj: {
                backgroundColor: 'red'
            },
            styleArr: [{
                backgroundColor: 'yellowgreen'
            }]
        },
        methods: {

        },
    })

    /*
        f12 ————> console
        vm.classObj 可以看到 aa,bb,cc 属性被拦截
        vm.classObj.aa = false , 类只剩 bb
        vm.classObj.dd = true , 类没有 dd, 
        vm.classObj ,dd 属性没有被拦截,见 05-监听器.html, 属性的新增或删除也无法监听
    
        vue2 解决方案1：Vue.set(对象, 属性, 值)
            Vue.set(vm.classObj, 'dd', true);
            vm.classObj

        vue2 解决方案2：VUE 重写了所有的数组方法，使其可以进行拦截、更新
            vm.classArr.push('dd');
            vm.classArr    
    */
    /*

        vm.styleObj.fontSize = '30px'; 
        vm.styleObj        新增的属性未被拦截生效
   
         vue2 解决方案1：Vue.set(对象, 属性, 值)
            Vue.set(vm.styleObj, 'fontSize', '30px');
            vm.styleObj

        vue2 解决方案2：VUE 重写了所有的数组方法，使其可以进行拦截、更新
            vm.styleArr.push({fontSize:'30px'});  // 属性的合并覆盖
            vm.styleArr  
    */
</script>

</html>